<template>
    <div class="main">
      <IndexHeader></IndexHeader>
      <Breadcrumb v-if="$route.name !== 'dashboard'"></Breadcrumb>
      <div class="content">
        <router-view></router-view>
      </div>
      <IndexFooter></IndexFooter>
    </div>
</template>

<script>
import { login } from '@/api/common'
import { mapMutations } from 'vuex'
import IndexHeader from '@/views/front/components/IndexHeader'
import IndexFooter from '@/views/front/components/IndexFooter'
import Breadcrumb from '@/views/front/components/Breadcrumb'
export default {
  name: 'login',
  components: {
    IndexHeader,
    IndexFooter,
    Breadcrumb
  },
  data () {
    return {
      customActiveKey: 'tab1',
      loginBtn: false,
      loginType: 0,
      isLoginError: false,
      requiredTwoStepCaptcha: false,
      stepCaptchaVisible: false,
      form: this.$form.createForm(this),
      state: {
        time: 60,
        loginBtn: false,
        loginType: 0,
        smsSendBtn: false
      }
    }
  },
  created () {
  },
  // computed: {
  //   ...mapState({
  //     userInfo: state => state.user.userInfo
  //   })
  // },
  methods: {
    ...mapMutations('common', ['SET_TOKEN']),
    async sendData (params) {
      this.state.loginBtn = true
      let res = await login(params)
      if (res.code === 200) {
        localStorage.setItem('ats_vendor_token', res.authorization)
        this.SET_TOKEN({ token: res.authorization })
        this.$message.success(res.message)
        this.$router.push('/')
      } else {
        this.$message.error(res.message)
      }
      this.state.loginBtn = false
    },
    login () {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.sendData(values)
        }
      })
    },
    handleTabClick (key) {
      this.customActiveKey = key
    },
    handleSubmit (e) {
      e.preventDefault()
    },
    getCaptcha (e) {
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../styles/var.styl'
.user-layout-login
  label
    font-size 14px
  .getCaptcha
    display block
    width 100%
    height 40px
  .forge-password
    font-size 14px
  button.login-button
    padding 0 15px
    font-size 16px
    height 40px
    width 100%
  .user-login-other
    text-align left
    margin-top 24px
    line-height 22px
    .item-icon
      font-size 24px
      color rgba(0, 0, 0, 0.2)
      margin-left 16px
      vertical-align middle
      cursor pointer
      transition color 0.3s
      &:hover
        color #1890ff
    .register
      float right
.main
  background #fff
  .content
    // width 1200px
    margin 0 auto
    min-height calc(100vh - 175px)
    padding-bottom 70px
</style>
